<!DOCTYPE html>
<html>
<head>
  
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/main1119.css"/>
    <style>
      .taiwan{
          width:100px;
          height:100px;
         
          z-index:3000;
          color:#fff;
      }
    </style>
    <script type="text/javascript" src='http://webapi.amap.com/maps?v=1.4.4&key=b95466bcdee644fbb6ad5245a348a102'></script>
    <!-- UI组件库 1.0 -->
    <script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
    <script src='./js/jquery-1.10.1.min.js'></script>
    <script src='./js/swiper.min.js'></script>
    <script src='./js/script.js'></script>
</head>
<body>
    <div class='box'>
       <div class='left'>
           <div class='left_top'>
               <div class="Oval">
                    <div class='Oval_11'></div>
                    <div class='Oval_12'></div>
                    <div class='Oval_10'></div>
                    <div class='Oval_9'></div>
                    <div class='all_data'>
                        <h3>63%</h3>
                        <p>签约189座</p>
                    </div>
               </div>

               <div class='target'>
                   <ul>
                       <li>
                            <div class='dong'>
                               <div class="semipolar-spinner" :style="spinnerStyle">
                                    <div class="ring"></div>
                                    <div class="ring"></div>
                                    <div class="ring"></div>
                                    <div class="ring"></div>
                                    <div class="ring"></div>
                                </div>签约站
                            </div>
                            <div class='dong'>
                                <div class="semipolar-spinner" :style="spinnerStyle">
                                        <div class="ring"></div>
                                        <div class="ring"></div>
                                        <div class="ring"></div>
                                        <div class="ring"></div>
                                        <div class="ring"></div>
                                </div>待签约站
                            </div>
                        </li>
                       <li>战役目标：<span>300</span>座</li>
                   </ul>
               </div>
           </div>
           <div class='left_bottom'>
                <ul class='bottom_ico'>
                    <li><p class="Group_7"><img src="./img/Group_7.png" alt=""></p><p class=' play money'><img src="./img/money.png" alt=""></p></li>
                    <li><p class="Group_7"><img src="./img/Group_7.png" alt=""></p><p class=' play youdi'><img src="./img/youdi.png" alt=""></p></li>
                </ul>
                <ul class='bottom_data'>
                    <li><span>10036.03</span><span>销售额(万元)</span></li>
                    <li><span>6034.09</span><span>总销量(吨)</span></li>
                </ul>
           </div>
       </div>
       <div class='right'>
            <img src="./img/右下.png" alt="" class='right_pic'>
            <p id='time'></p>
            <div id="city_auto">
                <ul id='ul'>
                   
                </ul>
            </div>
            <div id="mapContainer" class="map" tabindex="0"></div>
          
       </div> 
    </div>
    <!-- 弹框 -->
    <div id='bounced' style='display:none'>
        <div class='bounced_box'>
             <h3>感谢<span>韦进 同志</span>辛苦努力！成功签约</h3>
             <h1><span>中关村站</span></h1>
             <h4>该店位于<span>海淀区域</span>，预估销售量：<span>1314</span>吨，签约类型：<span>加盟</span></h4>
             <h5></h5>
             <h2>待签约站：<span>128</span>座</h2>
             <h6>诸位同志继续努力！</h6>
        </div>
    </div>
   <!-- <div class='canvas'>
         <canvas id="canvas" width="3840px" height="2160px"></canvas>
    </div> -->

  
    <!-- <script src='./js/canvas.js'></script> -->
    <script>
        // $.ajax({
        //     url:'http://localhost:8000/api/datajson',
        //     type:'get',
        //     dataType:'json',
        //     headers:{'Access-Control-Allow-Origin':'*'},
        //     success:function(data){
        //        console.log(data)
        //     }
        // })
   var dataJson={
    "福州市":{
        "adcode":"350100",
        "all":[
            { "position":[118.17 , 26.65],"content":'仓山区'}]
    },
    "龙岩市":{
        "adcode":"350800",
        "all":[
        { "position":[116.30946, 39.937629 ],"content":'连城县'}]
    },
    "南平市":{
        "adcode":"350700",
        "all":[
        { "position":[118.17 , 26.65],"content":'建阳区'}]
    },
    "宁德市":{
        "adcode":"350900",
        "all":[
        { "position":[116.30946, 39.937629],"content":'古田县'}]
    },
    "厦门市":{
        "adcode":"350200",
        "all":[
        { "position":[116.30946, 39.937629],"content":'思明区'}]
    }
   };
   var newLi='';
   for(var i in dataJson){
        newLi+='<li><span adcode='+dataJson[i].adcode+'>'+i+'</span><span><i></i></span></li>'
   }
   $('#ul').html(newLi)
    var map, district, polygons = [], citycode;
   map = new AMap.Map('mapContainer', {
       resizeEnable: true,
       center: [116.30946, 39.937629],
       zoom: 13
   });
   function refresh() {
       map.setMapStyle('amap://styles/c444b1908e6cb7da6e88efd07c13619f');
   }
   refresh()
   //行政区划查询
   AMap.service('AMap.DistrictSearch', function() {
       var opts = {
           subdistrict: 1,   //返回下一级行政区
           showbiz:false  //最后一级返回街道信息
       };
       district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用
   })
    function getData(data,level,obj) {
       var bounds = data.boundaries;
       if (bounds) {
           for (var i = 0, l = bounds.length; i < l; i++) {
               var polygon = new AMap.Polygon({
                   map: map,
                   strokeWeight: 1,
                   strokeColor: '#CC66CC',
                   fillColor: '#CCF3FF',
                   fillOpacity: 0.5,
                   path: bounds[i]
               });
               polygons.push(polygon);
           }
            map.setFitView();//地图自适应
            for(var j in dataJson){  
                if(obj==dataJson[j].adcode){
                    console.log(11111)
                    dataJson[j].all.forEach(function(marker){
                        console.log(marker)
                        marker=new AMap.Marker({
                        map: map,
                        position: [marker.position[0], marker.position[1]],
                        content:'<div class="marker_ico taiwan"><div class="semipolar-spinner"><div class="ring"></div><div class="ring"></div><div class="ring"></div><div class="ring"></div><div class="ring"></div></div><p>'+marker.content+'</p></div>'
                        });
                        marker.setMap(map)
                    })
                }
            }
       }
    };
    
    function search(obj) {
       //清除地图上所有覆盖物
       map.clearMap();
       district.setLevel('city'); //行政区级别
       district.setExtensions('all');
       // //行政区查询
       // //按照adcode进行查询可以保证数据返回的唯一性
       district.search(obj, function(status, result) {
           if(status === 'complete'){ 
               getData(result.districtList[0],'city',obj);
           }
       });
    }
   search($('#ul li').eq(2).attr('adcode'))
// search("350100")
    setInterval(function(){
        var date = new Date();
        var year=date .getFullYear(); //获取完整的年份(4位)
        var month=date.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var data=date.getDate(); //获取当前日(1-31)
        var week=date.getDay(); //获取当前星期X(0-6,0代表星期天)
        var weeks = ["日","一","二","三","四","五","六"]; 
        var getWeek = "星期" + weeks[week]; 
        var minute = date.getMinutes();
        var second = date.getSeconds();
        var Appendzero=function(obj){
            if(obj<10) return "0" +""+ obj;  
            else return obj;  
        }
        document.getElementById('time').innerHTML="<span class='year'>"+year+"</span>年<span class='month'>"+Appendzero(month)+"</span>月<span class='data'>"+data+"</span>号<span class='week'>"+getWeek+"</span>";
    },1000)    
    $(function(){
		$('#city_auto').solid({
		});
    })
  
    </script>
</body>
</html>